<!doctype html>
<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width">
        <meta name="restype" content="api">
        <meta name="product" content="kendo-ui">
        
        <title>Shape</title>
        <link rel="shortcut icon" href="/favicon.ico"/>
        
        <link href="//fonts.googleapis.com/css?family=Roboto:400,500,700,900" rel="stylesheet">
        <link href='https://fonts.googleapis.com/css?family=Roboto+Mono:400,500,700' rel='stylesheet' type='text/css'>
        <!-- <link href="https://kendo.cdn.telerik.com/2017.3.1026/styles/kendo.common.min.css" rel="stylesheet" /> -->
        <link rel="stylesheet" href="http://oygy5legq.bkt.clouddn.com/kendo.common.min.css">
        <link rel="stylesheet" href="/assets/styles.css?cb=8338967476da1c756a6defe19c1f9984">
        <link rel="stylesheet" href="/assets/icon-font.css?cb=25d8b9593057297c278fcd6d7d263c8e">
        <link rel="stylesheet" href="/assets/theme.css?cb=d82da02940126146560da1ae3bb0bf64">
        
        <!-- <script src="https://code.jquery.com/jquery-1.10.2.js"></script> -->
        <script src="https://cdn.bootcss.com/jquery/1.10.2/jquery.min.js"></script>
        <!-- <script src="https://kendo.cdn.telerik.com/2017.3.1026/js/kendo.web.min.js"></script> -->
        <script src="http://oygy5legq.bkt.clouddn.com/kendo.web.min.js"></script>
        <!-- <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.6.0/codemirror.min.css">
        <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.6.0/codemirror.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.6.0/mode/javascript/javascript.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.6.0/mode/css/css.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.6.0/mode/xml/xml.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.6.0/mode/htmlmixed/htmlmixed.min.js"></script> -->
        <script src="/assets/prettify.js?cb=9671553084e1962263b152af1f563c3c"></script>
        <script src="/assets/app.js?cb=c577f29da14c3752a8c4ba001dde39e5"></script>
        
        <script src="/assets/dojo.js?cb=545f7f252dd3279c5a236b777c1668f1"></script>
        
        

        <!--[if lt IE 9]>
        <script>
        document.createElement('header');
        document.createElement('nav');
        document.createElement('section');
        document.createElement('article');
        document.createElement('aside');
        document.createElement('footer');
        document.createElement('hgroup');
        </script>
        <![endif]-->
    </head>
    <body>
        <!-- Google Tag Manager -->
        <!-- <noscript>
            <iframe src="//www.googletagmanager.com/ns.html?id=GTM-6X92" height="0" width="0" style="display: none; visibility: hidden"></iframe>
        </noscript>
        <script>(function(w, d, s, l, i) { w[l] = w[l] || []; w[l].push({ 'gtm.start': new Date().getTime(), event: 'gtm.js' }); var f = d.getElementsByTagName(s)[0], j = d.createElement(s), dl = l != 'dataLayer' ? '&l=' + l : ''; j.async = true; j.src = '//www.googletagmanager.com/gtm.js?id=' + i + dl; f.parentNode.insertBefore(j, f); })(window, document, 'script', 'dataLayer', 'GTM-6X92');</script> -->
        <!-- End Google Tag Manager -->
        <aside class="TK-Hat">
    <figure class="TK-Hat-Brand">
        <a href="https://www.progress.com" class="TK-PRGS-Logo">
            <svg xmlns="http://www.w3.org/2000/svg" width="94" height="40" viewBox="0 0 512 120">
                <path fill="#5ce500" d="M95.52 29.33v51a3.93 3.93 0 0 1-1.78 3.08l-1.67 1-12.72 7.35-8.59 5-1.78 1V42.6L21.23 15 43.91 1.93 46 .74a3.94 3.94 0 0 1 3.56 0L81 18.9l14.51 8.38v2.05zM58.36 48.72l-9.79-5.66-22.91-13.23a4 4 0 0 0-3.56 0L1.77 41.57 0 42.6l34.49 19.91v39.83l20.3-11.73 1.79-1a3.94 3.94 0 0 0 1.78-3.08V48.72zM0 82.43l23.86 13.78V68.63z"></path>
                <path fill="#4b4e52" d="M148.09 27.28h-26v70.48h11.55V70.1h14.57c15.77 0 24.45-7.7 24.45-21.69 0-6.35-2.4-21.12-24.55-21.12m12.78 21.31c0 7.95-4.12 11.19-14.24 11.19h-13v-22.1h14.57c8.56 0 12.71 3.57 12.71 10.91M207 46.41l.87.42-2 10.42-1.35-.42a11.32 11.32 0 0 0-3.34-.51c-10.79 0-11.67 8.59-11.67 19v22.44h-10.64V46h10v6.24c2.73-4.2 6-6.37 10.37-6.9a14.55 14.55 0 0 1 7.76 1.07M233.29 45c-8.42 0-15.16 3.2-19.5 9.27-4.56 6.37-5.23 13.85-5.23 17.74 0 16.36 9.7 26.92 24.73 26.92 18.26 0 24.73-14.71 24.73-27.3 0-7.25-2.15-13.82-6-18.51-4.41-5.31-10.87-8.12-18.7-8.12m0 44.38c-8.37 0-13.57-6.66-13.57-17.37s5.2-17.55 13.57-17.55S247 61.23 247 71.78c0 10.83-5.24 17.56-13.66 17.56m114.55-42.93l.87.42-2 10.42-1.35-.42a11.26 11.26 0 0 0-3.33-.51c-10.78 0-11.66 8.59-11.66 19v22.44h-10.66V46h10v6.24c2.73-4.2 6-6.37 10.37-6.9a14.54 14.54 0 0 1 7.73 1.06m38.4 34.76l-.2.57c-2.23 6.36-7.57 7.7-11.65 7.7-8.09 0-13.3-5.37-13.81-14.09h36.59l.13-1a31.26 31.26 0 0 0 .12-4.12v-.93C396.93 54.78 387.48 45 374 45c-7.9 0-14.37 3.1-18.73 9a30.85 30.85 0 0 0-5.54 18c0 16 9.95 26.74 24.74 26.74 11.45 0 19.33-5.82 22.2-16.38l.33-1.2h-10.7zM361 66.05c.9-7.17 5.81-11.73 12.79-11.73 5.33 0 11.64 3.1 12.52 11.73H361zm-60.7-15.71c-3.45-3.58-8.06-5.39-13.76-5.39-15.69 0-22.83 13.81-22.83 26.63 0 13.16 7.06 26.44 22.83 26.44a18.33 18.33 0 0 0 13.35-5.42c0 2.28-.1 4.45-.16 5.38-.58 8.54-4.68 12.51-12.91 12.51-4.47 0-9.61-1.59-10.6-6l-.22-1h-10.54l.17 1.41c1.1 9.12 9.11 14.79 20.9 14.79 10.34 0 17.7-3.9 21.28-11.26 1.73-3.55 2.6-8.72 2.6-15.37V46h-10.13v4.34zm-13.11 38.15c-3.74 0-12.43-1.69-12.43-17.37 0-10.3 4.87-16.7 12.71-16.7 6.06 0 12.52 4.39 12.52 16.7 0 10.87-4.79 17.37-12.81 17.37m159.67-6.31c0 8.23-6.83 16.53-22.09 16.53-13.5 0-21.53-5.85-22.61-16.45l-.15-1.1h10.52l.21.84c1.29 6.38 7.37 7.72 12.24 7.72 5.34 0 11-1.72 11-6.54 0-2.44-1.59-4.18-4.73-5.16-1.86-.55-4.15-1.2-6.56-1.87-4.16-1.16-8.47-2.38-11.12-3.29-6.56-2.35-10.33-6.93-10.33-12.56 0-10.43 10.16-15.11 20.22-15.11 13.46 0 20.42 5.07 21.3 15.49l.09 1.07H434.5l-.14-.82c-1-6-7-6.9-10.48-6.9-3 0-10 .53-10 5.5 0 2.25 1.93 3.91 5.89 5.06 1.18.33 2.94.78 5 1.31 4.22 1.09 9.48 2.46 12.13 3.37 6.59 2.32 9.93 6.67 9.93 13m49.39 0c0 8.23-6.83 16.53-22.09 16.53-13.5 0-21.53-5.85-22.61-16.45l-.11-1.09H462l.12.74c1.29 6.38 7.37 7.72 12.24 7.72 5.34 0 11-1.72 11-6.54 0-2.44-1.59-4.18-4.72-5.16-1.86-.55-4.15-1.2-6.57-1.87-4.16-1.16-8.46-2.38-11.11-3.29-6.57-2.35-10.33-6.93-10.33-12.56 0-10.43 10.16-15.11 20.22-15.11 13.46 0 20.42 5.07 21.29 15.49l.09 1.07H483.9l-.14-.82c-1-6-7-6.9-10.48-6.9-3 0-9.95.53-9.95 5.5 0 2.25 1.93 3.91 5.89 5.06 1.18.33 2.94.78 5 1.31 4.22 1.09 9.48 2.46 12.13 3.37 6.58 2.32 9.93 6.67 9.93 13m8.43-30.78a7.37 7.37 0 1 1 7.29-7.37 7.23 7.23 0 0 1-7.29 7.37m0-13.49a6.12 6.12 0 1 0 6 6.12 5.91 5.91 0 0 0-6-6.12m-.85 7.49v2.46h-2.17v-7.74h3.62a2.58 2.58 0 0 1 2.86 2.7 2.26 2.26 0 0 1-1.49 2.34l1.77 2.7H506l-1.49-2.46h-.68zm1.21-3.49h-1.21v1.73h1.21a.86.86 0 0 0 1-.85.88.88 0 0 0-1-.89"></path>
            </svg>
        </a>
    </figure>
</aside>
<header id="page-header">
    <div class="toggle-nav"><span class="k-icon k-i-menu"></span></div>


    <div id="logo-bar">
        <a href="/introduction">
            <img alt="Kendo UI logo" class="logo" src="/images/kendo-ui.svg">
        </a>
    </div>

    
    <span class="show-search">
        <span class="k-icon k-i-search"></span>
    </span>
    
    <div class="nav-buttons">
        <a href="http://demos.telerik.com/kendo-ui/" class="btn demos-btn">Demos</a>
        <a href="http://www.telerik.com/kendo-ui" class="btn about-btn">About</a>
        <a href="http://www.telerik.com/purchase/kendo-ui" class="btn pricing-btn">Pricing</a>
        <a href="http://www.telerik.com/download/kendo-ui" class="btn btn-primary">Try now</a>
    </div>
</header>
        <div id="page-inner-content">
    <div id="page-nav">
        <div id="page-tree"></div>
        <script>
        $("#page-tree").kendoTreeView({
            dataSource: {
                transport: {
                    read: {
                        url: "/default.json",
                        dataType: "json"
                    }
                },
                schema: {
                    model: {
                        id: "path",
                        children: "items",
                        hasChildren: "items"
                    }
                }
            },
            messages: {
                loading: " "
            },
            select: preventParentSelection,
            template: navigationTemplate("/"),
            dataBound: expandNavigation("api/javascript/dataviz/diagram/shape.html")
        });
        </script>
    </div>

    <a id="page-edit-link" href="https://github.com/telerik/kendo-ui-core/edit/master/docs//api/javascript/dataviz/diagram/shape.md"><span class="k-icon k-i-pencil"></span> Edit this page</a>
    <div id="markdown-toc"></div>

    <div id="page-article">
        <article>
            
             <h1 id="kendodatavizdiagramshape"><a href="#kendodatavizdiagramshape">kendo.dataviz.diagram.Shape</a></h1>

<p>The Shape object represents a visual node in the graph or diagram.</p>

<h2 id="configuration"><a href="#configuration">Configuration</a></h2>

<h3 id="configuration-id">
<a href="#configuration-id">id </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String" class="type-link"><code>String</code></a>
</h3>

<p>The unique identifier for a Shape.</p>

<h3 id="configuration-editable">
<a href="#configuration-editable">editable </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Boolean" class="type-link"><code>Boolean |</code></a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object" class="type-link"><code>Object</code></a> <em>(default: true)</em>
</h3>

<p>Defines the shape editable options.</p>

<h3 id="configuration-editable.connect">
<a href="#configuration-editable.connect">editable.connect </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Boolean" class="type-link"><code>Boolean</code></a>
</h3>

<p>Specifies whether the connectors should appear on hover.</p>

<h3 id="configuration-path">
<a href="#configuration-path">path </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String" class="type-link"><code>String</code></a>
</h3>

<p>The path option of a Shape is a description of a custom geometry. The format follows the standard SVG format (<a href="http://www.w3.org/TR/SVG/paths.html#PathData">http://www.w3.org/TR/SVG/paths.html#PathData</a> "SVG Path data.").</p>

<h3 id="configuration-stroke">
<a href="#configuration-stroke">stroke </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object" class="type-link"><code>Object</code></a>
</h3>

<p>Defines the stroke configuration.</p>

<h3 id="configuration-stroke.color">
<a href="#configuration-stroke.color">stroke.color </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String" class="type-link"><code>String</code></a>
</h3>

<p>Defines the color of the shape's stroke.</p>

<h3 id="configuration-stroke.width">
<a href="#configuration-stroke.width">stroke.width </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number" class="type-link"><code>Number</code></a> <em>(default: 1)</em>
</h3>

<p>Defines the thickness or width of the shape's stroke.</p>

<h3 id="configuration-stroke.dashType">
<a href="#configuration-stroke.dashType">stroke.dashType </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String" class="type-link"><code>String</code></a>
</h3>

<p>The dash type of the shape.</p>

<p>The following dash types are supported:</p>

<ul>
<li>"dash" - a line consisting of dashes</li>
<li>"dashDot" - a line consisting of a repeating pattern of dash-dot</li>
<li>"dot" - a line consisting of dots</li>
<li>"longDash" - a line consisting of a repeating pattern of long-dash</li>
<li>"longDashDot" - a line consisting of a repeating pattern of long-dash-dot</li>
<li>"longDashDotDot" - a line consisting of a repeating pattern of long-dash-dot-dot</li>
<li>"solid" - a solid line</li>
</ul>

<h3 id="configuration-type">
<a href="#configuration-type">type </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String" class="type-link"><code>String</code></a> <em>(default: "rectangle")</em>
</h3>

<p>Specifies the type of the Shape using any of the built-in shape type.</p>

<ul>
<li>"rectangle": this is the default option, representing a SVG Rectangle</li>
<li>"circle" : a SVG circle/ellipse</li>
</ul>

<h3 id="configuration-x">
<a href="#configuration-x">x </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number" class="type-link"><code>Number</code></a> <em>(default: 0)</em>
</h3>

<p>Defines the x-coordinate of the shape when added to the diagram.</p>

<h3 id="configuration-y">
<a href="#configuration-y">y </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number" class="type-link"><code>Number</code></a> <em>(default: 0)</em>
</h3>

<p>Defines the y-coordinate of the shape when added to the diagram.</p>

<h3 id="configuration-minWidth">
<a href="#configuration-minWidth">minWidth </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number" class="type-link"><code>Number</code></a> <em>(default: 20)</em>
</h3>

<p>Defines the minimum width the shape should have, i.e. it cannot be resized to a value smaller than the given one.</p>

<h3 id="configuration-minHeight">
<a href="#configuration-minHeight">minHeight </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number" class="type-link"><code>Number</code></a> <em>(default: 20)</em>
</h3>

<p>Defines the minimum height the shape should have, i.e. it cannot be resized to a value smaller than the given one.</p>

<h3 id="configuration-width">
<a href="#configuration-width">width </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number" class="type-link"><code>Number</code></a> <em>(default: 100)</em>
</h3>

<p>Defines the width of the shape when added to the diagram.</p>

<h3 id="configuration-height">
<a href="#configuration-height">height </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number" class="type-link"><code>Number</code></a> <em>(default: 100)</em>
</h3>

<p>Defines the height of the shape when added to the diagram.</p>

<h3 id="configuration-fill">
<a href="#configuration-fill">fill </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String" class="type-link"><code>String |</code></a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object" class="type-link"><code>Object</code></a>
</h3>

<p>Defines the fill options of the shape.</p>

<h3 id="configuration-fill.color">
<a href="#configuration-fill.color">fill.color </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String" class="type-link"><code>String</code></a>
</h3>

<p>Defines the fill color of the shape.</p>

<h3 id="configuration-fill.opacity">
<a href="#configuration-fill.opacity">fill.opacity </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number" class="type-link"><code>Number</code></a> <em>(default: 1)</em>
</h3>

<p>Defines the fill opacity of the shape.</p>

<h3 id="configuration-fill.gradient">
<a href="#configuration-fill.gradient">fill.gradient </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object" class="type-link"><code>Object</code></a>
</h3>

<p>Defines the gradient fill of the shape.</p>

<h3 id="configuration-fill.gradient.type">
<a href="#configuration-fill.gradient.type">fill.gradient.type </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String" class="type-link"><code>String</code></a> <em>(default: "linear")</em>
</h3>

<p>The type of the gradient. Supported values are:</p>

<ul>
<li>linear</li>
<li>radial</li>
</ul>

<h3 id="configuration-fill.gradient.center">
<a href="#configuration-fill.gradient.center">fill.gradient.center </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array" class="type-link"><code>Array</code></a>
</h3>

<p>The center of the radial gradient.</p>

<p>Coordinates are relative to the shape bounding box.
For example [0, 0] is top left and [1, 1] is bottom right.</p>

<h3 id="configuration-fill.gradient.radius">
<a href="#configuration-fill.gradient.radius">fill.gradient.radius </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number" class="type-link"><code>Number</code></a> <em>(default: 1)</em>
</h3>

<p>The radius of the radial gradient relative to the shape bounding box.</p>

<h3 id="configuration-fill.gradient.start">
<a href="#configuration-fill.gradient.start">fill.gradient.start </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array" class="type-link"><code>Array</code></a>
</h3>

<p>The start point of the linear gradient.</p>

<p>Coordinates are relative to the shape bounding box.
For example [0, 0] is top left and [1, 1] is bottom right.</p>

<h3 id="configuration-fill.gradient.end">
<a href="#configuration-fill.gradient.end">fill.gradient.end </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array" class="type-link"><code>Array</code></a>
</h3>

<p>The end point of the linear gradient.</p>

<p>Coordinates are relative to the shape bounding box.
For example [0, 0] is top left and [1, 1] is bottom right.</p>

<h3 id="configuration-fill.gradient.stops">
<a href="#configuration-fill.gradient.stops">fill.gradient.stops </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array" class="type-link"><code>Array</code></a>
</h3>

<p>The array of gradient color stops.</p>

<h3 id="configuration-fill.gradient.stops.offset">
<a href="#configuration-fill.gradient.stops.offset">fill.gradient.stops.offset </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number" class="type-link"><code>Number</code></a>
</h3>

<p>The stop offset from the start of the element.
Ranges from 0 (start of gradient) to 1 (end of gradient).</p>

<h3 id="configuration-fill.gradient.stops.color">
<a href="#configuration-fill.gradient.stops.color">fill.gradient.stops.color </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String" class="type-link"><code>String</code></a>
</h3>

<p>The color in any of the following formats.</p>

<table>
<thead>
<tr>
<th>Format</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td>red</td>
<td>
<a href="http://www.w3.org/TR/css3-color/#html4">Basic</a> or <a href="http://www.w3.org/TR/css3-color/#svg-color">Extended</a> CSS Color name</td>
</tr>
<tr>
<td>#ff0000</td>
<td>Hex RGB value</td>
</tr>
<tr>
<td>rgb(255, 0, 0)</td>
<td>RGB value</td>
</tr>
</tbody>
</table>

<p>Specifying 'none', 'transparent' or '' (empty string) will clear the fill.</p>

<h3 id="configuration-fill.gradient.stops.opacity">
<a href="#configuration-fill.gradient.stops.opacity">fill.gradient.stops.opacity </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number" class="type-link"><code>Number</code></a>
</h3>

<p>The fill opacity.
Ranges from 0 (completely transparent) to 1 (completely opaque).</p>

<h3 id="configuration-hover">
<a href="#configuration-hover">hover </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object" class="type-link"><code>Object</code></a>
</h3>

<p>Defines the hover configuration.</p>

<h3 id="configuration-hover.fill">
<a href="#configuration-hover.fill">hover.fill </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String" class="type-link"><code>String |</code></a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object" class="type-link"><code>Object</code></a>
</h3>

<p>Defines the hover fill options of the shape.</p>

<h3 id="configuration-hover.fill.color">
<a href="#configuration-hover.fill.color">hover.fill.color </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String" class="type-link"><code>String</code></a>
</h3>

<p>Defines the hover fill color of the shape.</p>

<h3 id="configuration-hover.fill.opacity">
<a href="#configuration-hover.fill.opacity">hover.fill.opacity </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number" class="type-link"><code>Number</code></a> <em>(default: 1)</em>
</h3>

<p>Defines the hover fill opacity of the shape.</p>

<h3 id="configuration-connectors">
<a href="#configuration-connectors">connectors </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array" class="type-link"><code>Array</code></a>
</h3>

<p>Defines the connectors the shape owns.</p>

<h3 id="configuration-connectors.name">
<a href="#configuration-connectors.name">connectors.name </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String" class="type-link"><code>String</code></a>
</h3>

<p>The connector name. Predefined names include:</p>

<ul>
<li>"top" - top connector.</li>
<li>"right" - right connector.</li>
<li>"bottom" - bottom connector.</li>
<li>"bottomRight" - bottom right connector.</li>
<li>"left" - left connector.</li>
<li>"auto" - auto connector.</li>
</ul>

<h3 id="configuration-connectors.description">
<a href="#configuration-connectors.description">connectors.description </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String" class="type-link"><code>String</code></a>
</h3>

<p>The connector description.</p>

<h3 id="configuration-connectors.position">
<a href="#configuration-connectors.position">connectors.position </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function" class="type-link"><code>Function</code></a>
</h3>

<p>The function that positions the connector.</p>

<h3 id="configuration-rotation">
<a href="#configuration-rotation">rotation </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object" class="type-link"><code>Object</code></a>
</h3>

<p>The shape rotation settings.</p>

<h3 id="configuration-rotation.angle">
<a href="#configuration-rotation.angle">rotation.angle </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number" class="type-link"><code>Number</code></a> <em>(default: 0)</em>
</h3>

<p>The rotation angle.</p>

<h3 id="configuration-content">
<a href="#configuration-content">content </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object" class="type-link"><code>Object</code></a>
</h3>

<p>Defines the shapes content settings.</p>

<h3 id="configuration-content.align">
<a href="#configuration-content.align">content.align </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String" class="type-link"><code>String</code></a>
</h3>

<p>The alignment of the text inside the shape.</p>

<h3 id="configuration-content.color">
<a href="#configuration-content.color">content.color </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String" class="type-link"><code>String</code></a>
</h3>

<p>The color of the shape content text.</p>

<h3 id="configuration-content.fontFamily">
<a href="#configuration-content.fontFamily">content.fontFamily </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String" class="type-link"><code>String</code></a>
</h3>

<p>The font family of the shape content text.</p>

<h3 id="configuration-content.fontSize">
<a href="#configuration-content.fontSize">content.fontSize </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number" class="type-link"><code>Number</code></a>
</h3>

<p>The font size of the shape content text.</p>

<h3 id="configuration-content.fontStyle">
<a href="#configuration-content.fontStyle">content.fontStyle </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String" class="type-link"><code>String</code></a>
</h3>

<p>The font style of the shape content text.</p>

<h3 id="configuration-content.fontWeight">
<a href="#configuration-content.fontWeight">content.fontWeight </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String" class="type-link"><code>String</code></a>
</h3>

<p>The font weight of the shape content text.</p>

<h3 id="configuration-content.text">
<a href="#configuration-content.text">content.text </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String" class="type-link"><code>String</code></a>
</h3>

<p>The text displayed in the shape.</p>

<h3 id="configuration-selectable">
<a href="#configuration-selectable">selectable </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Boolean" class="type-link"><code>Boolean</code></a> <em>(default: true)</em>
</h3>

<p>Specifies if the shape can be selected.</p>

<h3 id="configuration-visual">
<a href="#configuration-visual">visual </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function" class="type-link"><code>Function</code></a>
</h3>

<p>A function returning a visual element to render for this shape.</p>

<h3 id="configuration-connectorDefaults">
<a href="#configuration-connectorDefaults">connectorDefaults </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object" class="type-link"><code>Object</code></a>
</h3>

<p>Defines default options for the shape connectors.</p>

<h3 id="configuration-connectorDefaults.width">
<a href="#configuration-connectorDefaults.width">connectorDefaults.width </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number" class="type-link"><code>Number</code></a> <em>(default: 8)</em>
</h3>

<p>Defines the width of the shape connectors.</p>

<h3 id="configuration-connectorDefaults.height">
<a href="#configuration-connectorDefaults.height">connectorDefaults.height </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number" class="type-link"><code>Number</code></a> <em>(default: 8)</em>
</h3>

<p>Defines the height of the shape connectors.</p>

<h3 id="configuration-connectorDefaults.hover">
<a href="#configuration-connectorDefaults.hover">connectorDefaults.hover </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object" class="type-link"><code>Object</code></a>
</h3>

<p>Defines the hover configuration of the shape connectors.</p>

<h3 id="configuration-connectorDefaults.hover.fill">
<a href="#configuration-connectorDefaults.hover.fill">connectorDefaults.hover.fill </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String" class="type-link"><code>String |</code></a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object" class="type-link"><code>Object</code></a>
</h3>

<p>Defines the hover fill options of the shape connectors.</p>

<h3 id="configuration-connectorDefaults.hover.fill.color">
<a href="#configuration-connectorDefaults.hover.fill.color">connectorDefaults.hover.fill.color </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String" class="type-link"><code>String</code></a>
</h3>

<p>Defines the hover fill color of the shape connectors.</p>

<h3 id="configuration-connectorDefaults.hover.fill.opacity">
<a href="#configuration-connectorDefaults.hover.fill.opacity">connectorDefaults.hover.fill.opacity </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number" class="type-link"><code>Number</code></a> <em>(default: 1)</em>
</h3>

<p>Defines the hover fill opacity of the shape connectors.</p>

<h3 id="configuration-connectorDefaults.hover.stroke">
<a href="#configuration-connectorDefaults.hover.stroke">connectorDefaults.hover.stroke </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String" class="type-link"><code>String |</code></a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object" class="type-link"><code>Object</code></a>
</h3>

<p>Defines the hover stroke options of the shape connectors.</p>

<h3 id="configuration-connectorDefaults.hover.stroke.color">
<a href="#configuration-connectorDefaults.hover.stroke.color">connectorDefaults.hover.stroke.color </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String" class="type-link"><code>String</code></a> <em>(default: "Black")</em>
</h3>

<p>Defines the hover stroke color.</p>

<h3 id="configuration-connectorDefaults.hover.stroke.dashType">
<a href="#configuration-connectorDefaults.hover.stroke.dashType">connectorDefaults.hover.stroke.dashType </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String" class="type-link"><code>String</code></a>
</h3>

<p>The hover stroke dash type.</p>

<h3 id="configuration-connectorDefaults.hover.stroke.width">
<a href="#configuration-connectorDefaults.hover.stroke.width">connectorDefaults.hover.stroke.width </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number" class="type-link"><code>Number</code></a> <em>(default: 1)</em>
</h3>

<p>Defines the thickness or width of the shape connectors stroke on hover.</p>

<h3 id="configuration-connectorDefaults.fill">
<a href="#configuration-connectorDefaults.fill">connectorDefaults.fill </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String" class="type-link"><code>String |</code></a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object" class="type-link"><code>Object</code></a>
</h3>

<p>Defines the fill options of the shape connectors.</p>

<h3 id="configuration-connectorDefaults.fill.color">
<a href="#configuration-connectorDefaults.fill.color">connectorDefaults.fill.color </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String" class="type-link"><code>String</code></a>
</h3>

<p>Defines the fill color of the shape connectors.</p>

<h3 id="configuration-connectorDefaults.fill.opacity">
<a href="#configuration-connectorDefaults.fill.opacity">connectorDefaults.fill.opacity </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number" class="type-link"><code>Number</code></a> <em>(default: 1)</em>
</h3>

<p>Defines the fill opacity of the shape connectors.</p>

<h3 id="configuration-connectorDefaults.stroke">
<a href="#configuration-connectorDefaults.stroke">connectorDefaults.stroke </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String" class="type-link"><code>String |</code></a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object" class="type-link"><code>Object</code></a>
</h3>

<p>Defines the stroke options of the shape connectors.</p>

<h3 id="configuration-connectorDefaults.stroke.color">
<a href="#configuration-connectorDefaults.stroke.color">connectorDefaults.stroke.color </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String" class="type-link"><code>String</code></a> <em>(default: "Black")</em>
</h3>

<p>Defines the stroke color.</p>

<h3 id="configuration-connectorDefaults.stroke.dashType">
<a href="#configuration-connectorDefaults.stroke.dashType">connectorDefaults.stroke.dashType </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String" class="type-link"><code>String</code></a>
</h3>

<p>The stroke dash type.</p>

<h3 id="configuration-connectorDefaults.stroke.width">
<a href="#configuration-connectorDefaults.stroke.width">connectorDefaults.stroke.width </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number" class="type-link"><code>Number</code></a> <em>(default: 1)</em>
</h3>

<p>Defines the thickness or width of the shape connectors stroke.</p>

<h2 id="fields"><a href="#fields">Fields</a></h2>

<h3 id="fields-connectors">
<a href="#fields-connectors">connectors </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array" class="type-link"><code>Array</code></a>
</h3>

<p>The connectors defined on this shape.</p>

<h3 id="fields-dataItem">
<a href="#fields-dataItem">dataItem </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object" class="type-link"><code>Object</code></a>
</h3>

<p>The data item that this shape is bound to, if any.</p>

<h3 id="fields-shapeVisual">
<a href="#fields-shapeVisual">shapeVisual </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object" class="type-link"><code>Object</code></a>
</h3>

<p>The visual element representing the shape.</p>

<p>This is either the result returned from
<a href="/api/javascript/dataviz/ui/diagram#configuration-shapeDefaults.visual">shape.visual</a>
or a <a href="/api/javascript/dataviz/ui/diagram#configuration-shapes.type">predefined type</a>.</p>

<h3 id="fields-visual">
<a href="#fields-visual">visual </a><a href="/api/javascript/dataviz/diagram/group" class="type-link"><code>kendo.dataviz.diagram.Group</code></a>
</h3>

<p>A container for the <a href="#fields-shapeVisual">shapeVisual</a> element.</p>

<p>Positioning and transformations are applied on this container.</p>

<h2 id="methods"><a href="#methods">Methods</a></h2>

<h3 id="methods-position"><a href="#methods-position">position</a></h3>

<p>Get or set method returning the current global position or sets the position specified.</p>

<h4>Parameters</h4>

<h5>point <a href="/api/javascript/dataviz/diagram/point" class="type-link"><code>kendo.dataviz.diagram.Point</code></a>
</h5>

<p>Either the location to set or if no parameter given returns the current location.</p>

<h3 id="methods-clone"><a href="#methods-clone">clone</a></h3>

<p>Returns a clone (with a different id) of the shape.</p>

<h4>Returns</h4>

<p><a href="/api/javascript/dataviz/diagram/shape" class="type-link"><code>kendo.dataviz.diagram.Shape</code></a> A clone of the current shape.</p>

<h3 id="methods-select"><a href="#methods-select">select</a></h3>

<p>Selects or deselects the shape.</p>

<h4>Parameters</h4>

<h5>value <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Boolean" class="type-link"><code>Boolean</code></a>
</h5>

<p>Use 'true' to select the shape or 'false' to deselect it.</p>

<h3 id="methods-connections"><a href="#methods-connections">connections</a></h3>

<p>Returns the connections attached to the shape. You can optionally specify to return only the incoming or outgoing connections.</p>

<h4>Parameters</h4>

<h5>type <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String" class="type-link"><code>String</code></a>
</h5>

<p>If not parameter specified all connections are returned, if "in" then only the incoming (i.e. towards the shape) are returned, if "out" the only the outgoing (i.e. away from the shape) are returned.</p>

<h3 id="methods-getConnector"><a href="#methods-getConnector">getConnector</a></h3>

<p>Fetches a (default or custom) Connector defined on the Shape by its name.</p>

<h3 id="methods-getPosition"><a href="#methods-getPosition">getPosition</a></h3>

<p>Returns the middle positions of the sides of the bounds or the center of the shape's bounds. This method is useful when defining custom connectors where a position function relative to the shape's coordinate system is required.</p>

<h4>Parameters</h4>

<h5>side <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String" class="type-link"><code>String</code></a>
</h5>

<p>One of the four sides of a bound; "left", "right", "top", "bottom". If none specified the center of the shape's bounds will be returned.</p>

<h3 id="methods-redraw"><a href="#methods-redraw">redraw</a></h3>

<p>Renders the shape with the given options. It redefines the options and redraws the shape accordingly.</p>

<h4>Parameters</h4>

<h5>options <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object" class="type-link"><code>Object</code></a>
</h5>

<p>The object containing a subset of options to change. Follows the same structure as the <a href="#configuration">configuration</a>.</p>

<h5>Example - Redraw shape with new options</h5>

<pre><code>&lt;div id="diagram"&gt;&lt;/div&gt;
&lt;script&gt;
    $("#diagram").kendoDiagram({
      dataSource: {
          data: [{ "items": [{ items: [{}] }] }],
          schema: { model: { children: "items" } }
      },
      layout: {
          type: "tree"
      },
      dataBound: function(e) {
          e.sender.shapes[0].redraw({
              fill: {
                  color: "green"
              }
          });
      }
    });
&lt;/script&gt;
</code></pre>

<h3 id="methods-redrawVisual"><a href="#methods-redrawVisual">redrawVisual</a></h3>

<p>Redraws the shape visual element and its content</p> 
        </article>
    </div>
    <div id="feedback-container">
  <div id="feedback-section">
    <script src="/assets/feedback.js?cb=e99a3802c754fe2425831d58312c7c8b"></script>
    <span id="popupNotification"></span>
    <div id="feedback-menu-container">
      <div id="helpful-buttons-container">
        <span class="side-title">Is this article helpful?</span>
        <a class="button" id="yesButton">Yes</a> /
        <a class="button" id="noButton">No</a>
      </div>
      <div id="feedback-submitted-container">
        <span class="side-title">Thank you for your feedback!</span>
      </div>
    </div>
    <div id="feedback-window-container">
      <div id="feedback-form-window" style="background-color: white;">
        <h1 class="feedback-extw__title">Give article feedback</h1>
        <p>Tell us how we can improve this article</p>
        <span id="feedback-form-popup-container"></span>
        <form id="feedback-form">
          <div id="feedback-checkbox-area">
            <input id="hidden-sheet-id" type="hidden" value="14zzclhdh7dMLpg0iq4-2hweCdEiuxxqP3tHdr42-_Cs">
            <label>
              <input type="checkbox" data-bind="checked: outdatedSample" /> Code samples are inaccurate / outdated.
            </label>
            <span class="required-field" data-bind="visible: outdatedSample"></span>
            <textarea id="feedback-code-sample-text-input" placeholder="Please, specify more details ..." class="feedback-extw__textarea"
              data-bind="visible: outdatedSample, value: inaccurateOutdatedCodeSamplesText">
          </textarea>
            <label>
              <input type="checkbox" data-bind="checked: otherMoreInformation" /> I expected to find other / more information.
            </label>
            <span class="required-field" data-bind="visible: otherMoreInformation"></span>
            <textarea id="feedback-more-information-text-input" class="feedback-extw__textarea" placeholder="Please, specify what information can be added ..."
              data-bind="visible: otherMoreInformation, value: otherMoreInformationText">
          </textarea>
            <label>
              <input type="checkbox" data-bind="checked: textErrors" /> There are typos / broken links / broken page elements.
            </label>
            <span class="required-field" data-bind="visible: textErrors"></span>
            <textarea id="feedback-text-errors-text-input" class="feedback-extw__textarea" placeholder="Please, specify what needs to be fixed ..."
              data-bind="visible: textErrors, value: typosLinksElementsText">
          </textarea>
            <label>
              <input type="checkbox" data-bind="checked: inaccurateContent" /> Content is inaccurate / outdated.
            </label>
            <span class="required-field" data-bind="visible: inaccurateContent"></span>
            <textarea id="feedback-inaccurate-content-text-input" class="feedback-extw__textarea" placeholder="Please, specify which conent ..."
              data-bind="visible: inaccurateContent, value: inaccurateOutdatedContentText"></textarea>
            <label>
              <input type="checkbox" data-bind="checked: otherFeedback" /> Other
            </label>
            <span class="required-field" data-bind="visible: otherFeedback"></span>
            <textarea id="feedback-other-text-input" placeholder="Please, enter more details or not listed feedback ..." class="feedback-extw__textarea"
              data-bind="visible: otherFeedback, value: textFeedback">
          </textarea>
            <input id="feedback-email-input" type="email" placeholder="email (optional)" data-email-msg="Email format is not valid."
              class="feedback-extw__input input" data-bind="value: email" />
          </div>
        </form>
        <div class="feedback-extw__foot">
          <button id="form-submit-button" class="feedback-extw__button button button--action">Send feedback</button>
          <button id="form-close-button" class="feedback-extw__button button">Cancel</button>
        </div>
      </div>
    </div>
    <a id="close-button" class="button">
      <img src="/images/close-btn.svg" alt="close" />
    </a>
  </div>
  <div id="feedback-section-dummy">Dummy</div>
</div>
    <footer>
    <p>Copyright &copy; 2017 Progress Software Corporation and/or its subsidiaries or affiliates. All Rights Reserved.</p>
</footer>

</div>
    </body>
</html>

